import React,{ useState } from 'react'
import ChildComponent from '../../components/ChildComponent/ChildComponent'
const  Index:React.FC = () => {
  // const [parentState,setParentState] = useState("初始化状态值")
  // const handleClickFromChild = () =>{
  //   console.log("子组件触发父组件函数");
  // }

// 使用 ChildComponent 并允许用户动态修改它的属性

// ChildComponent.tsx:
// 这是一个接受 color 和 size 属性的功能组件。它根据传入的属性动态渲染文本的颜色和大小。

// index.tsx:
// 使用 useState 钩子管理组件的颜色和字体大小状态。
// 提供输入框（颜色选择器和数字输入框）让用户可以动态修改这些属性。
// 当用户更改属性时，状态更新，导致 ChildComponent 重新渲染并应用新的属性值。

  const [color,setColor] = useState<string>('blue');
  const [size,setSize] = useState<number>(16);

  return (
    <div>cart
      {/* <ChildComponent></ChildComponent>
      <ChildComponent propName='来自父组件的值'></ChildComponent> */}
      <h1>Dynamic Props Example</h1>
      <ChildComponent color={color} size={size} />

      <div style={{ marginTop: '20px' }}>
        <label htmlFor="color">Select Color:</label>
        <input
          type="color"
          id="color"
          value={color}
          onChange={(e) => setColor(e.target.value)}
        />

        <label htmlFor="size" style={{ marginLeft: '20px' }}>Font Size:</label>
        <input
          type="number"
          id="size"
          value={size}
          onChange={(e) => setSize(Number(e.target.value))}
          min={10}
          max={100}
        />
      </div>
    </div>
  )
}

export default Index